<template>
  <div class="app-container">
    <div>
      尚有<span style="color:red;font-size: 18px;font-weight: bold;">{{unsetDept2Count}}</span>个科室、
      <span style="color:red;font-size: 18px;font-weight: bold;">{{unsetDept1Count}}</span>个部门未设置访客审批人员，请立即设置，避免影响审批流程的正常进行。
    </div>

    <el-divider />

    <div class="block" v-loading="listLoading">
      <p>各部门访客审批人员设置</p>
      <el-tree
          :data="deptTreeData"
          node-key="id"
          default-expand-all
          highlight-current
          :expand-on-click-node="false">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <template v-if="!data.deptManagerUseridList">
              <el-button
                  @click="addManager(data.id)"
                  type="danger"
                  title="立即设置部门审批主管"
                  size="mini">立即设置</el-button>
            </template>
            <template v-else>
              <el-tag
                  style="margin-left: 4px;"
                  @close="doRemove(data.id, item.userid)"
                  v-for="(item, index) in data.managerList"
                  :key="item.userid"
                  closable>
                  {{item.name}}
              </el-tag>
              <el-button
                  @click="addManager(data.id)"
                  title="追加审批主管"
                  icon="el-icon-plus"
                  type="primary"
                  circle
                  plain
                  size="mini" style="margin-left: 10px;"></el-button>
            </template>
          </span>
        </div>
      </el-tree>
    </div>

    <el-dialog :visible.sync="dialogVisible" title="选择部门审核员">
      <div>
        <el-select v-model="selUserid" placeholder="请选择">
          <el-option
              v-for="item in deptUsers"
              :key="item.id"
              :label="item.name"
              :value="item.userid">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="doAppend()">
          确定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { list, deleteDeptManager, addDeptManager, getDeptUserList} from '@/api/deptManager'
import { deviceDelete } from '@/api/device'
import { selectAuthUserAllUsingPUT } from '@/api/role'

export default {
  name: 'DeptManager',
  components: {
    Pagination
  },
  data() {
    return {
      deptTreeData: [],
      deptUsers: [],
      // 未设置的部门
      unsetDept1Count: 0,
      // 未设置的科室
      unsetDept2Count: 0,
      listLoading: false,
      selDeptId: '',
      selUserid: '',
      dialogVisible: false
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      list().then(response => {
        if(response.code === 200) {
          this.deptTreeData = response.data
          this.unsetDept1Count = response.unsetDept1Count
          this.unsetDept2Count = response.unsetDept2Count
          this.listLoading = false
        } else {
          this.$message.warning("获取列表失败：" + response.msg)
        }
      })
    },
    addManager(deptId) {
      this.selUserid = ''
      this.selDeptId = deptId
      getDeptUserList('' + deptId).then(response => {
        if(response.code === 200) {
          this.deptUsers = response.rows
          this.dialogVisible = true
        } else {
          this.$message.warning("获取部门员工列表失败：" + response.msg)
        }
      })
    },
    doAppend() {
      if (!this.selUserid) {
        this.$message.warning('请选择审批人！')
        return
      }
      let obj = {
        userid: this.selUserid,
        deptId: this.selDeptId
      }
      addDeptManager(obj).then(response => {
        if(response.code === 200) {
          this.dialogVisible = false
          this.fetchData()
        } else {
          this.$message.warning("添加审批人失败：" + response.msg)
        }
      })
    },
    doRemove(deptId, userid) {
      this.$confirm('确认移除该审批人员吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          userid: userid,
          deptId: deptId
        }
        deleteDeptManager(obj).then(response => {
          if(response.code === 200) {
            this.fetchData()
          } else {
            this.$message.warning("移除审批人失败：" + response.msg)
          }
        })
      })
    }
  }
}
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree /deep/ .el-tree-node__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 42px;
  cursor: pointer;
}
</style>
